<template>
  <div class="detail_bottom">
    <div class="bottom_item">
      <div class="top">
        <span>商品详情</span>
      </div>
      <div class="xq_bottom">
        <el-row>
          <el-col :span="8">
            <el-space>
              <span> 开本: </span>
              <span> {{ data.bookSize }} 开 </span>
            </el-space>
          </el-col>
          <el-col :span="8">
            <el-space>
              <span> 纸张: </span>
              <span> {{ data.bindingLayout }} </span>
            </el-space>
          </el-col>
          <el-col :span="8">
            <el-space>
              <span> 包装: </span>
              <span> {{ data.bindingLayout }} </span>
            </el-space>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-space>
              <span> 是否套装: </span>
              <span> {{ isSub ? '是' : '否' }} </span>
            </el-space>
          </el-col>
          <el-col :span="8">
            <el-space>
              <span> 国际标准书号ISBN: </span>
              <span> {{ data.barCode }} </span>
            </el-space>
          </el-col>
          <el-col :span="8"> </el-col>
        </el-row>
        <el-row>
          <el-space>
            <span>所属分类:</span>
            <span>{{ data.bookingCategory }}</span>
          </el-space>
        </el-row>
      </div>
    </div>
    <div class="bottom_item">
      <div class="top">
        <span>内容简介</span>
      </div>
      <div class="xq_bottom"></div>
    </div>
    <div class="bottom_item">
      <div class="top">
        <span>编辑推荐</span>
      </div>
      <div class="xq_bottom"></div>
    </div>
    <div class="bottom_item">
      <div class="top">
        <span>作者简介</span>
      </div>
      <div class="xq_bottom">
        <span class="jianjie">
          {{ data.aboutAuthor }}
        </span>
      </div>
    </div>
    <div class="bottom_item">
      <div class="top">
        <span>目录</span>
      </div>
      <div class="xq_bottom">
        <span class="jianjie">
          {{ data.catalogue }}
        </span>
      </div>
    </div>
    <div class="bottom_item">
      <div class="top">
        <span>在线试读</span>
      </div>
      <div class="xq_bottom">
        <span class="jianjie">
          {{ data.onlineReading }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tabs',
  props: {
    data: Object,
  },
  data() {
    return {
      info: Object.assign({}, this.data),
    }
  },
}
</script>

<style scoped lang="scss">
.con_tab1 {
  span {
    color: #323232;
    line-height: 22px;
    font-weight: bold;
    font-size: 14px;
  }
  .jiage {
    background: #fafafa;
    margin-top: 20px;
    .jiadian {
      i {
        background: #ccc;
        display: inline-block;
        width: 4px;
        height: 4px;
        border-radius: 4px;
        margin-right: 5px;
        position: relative;
        top: -2px;
      }
    }
    .text_1 {
      font: 12px/22px 'Microsoft Yahei';
      color: #3c3c3c;
    }
    .shuom {
      font: bold 14px/30px 'Microsoft Yahei';
      color: #323232;
    }
  }
}
.detail_bottom {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  .bottom_item {
    width: 100%;
    .top {
      height: 30px;
      box-sizing: border-box;
      border-bottom: 2px solid #d1d1d1;
      margin: 20px 0;
      span {
        display: block;
        width: 107px;
        background: #cccccce3;
        height: 100%;
        font-size: 20px;
        color: #444;
        line-height: 30px;
        text-align: center;
        font-weight: 600;
        border-left: 3px solid #fd0000;
      }
    }
    .xq_bottom {
      span {
        color: #656565;
        line-height: 22px;
        font-size: 14px;
      }
    }
  }
}
</style>
